---
title: Next.js (App)
description: Next.jsの`app`ディレクトリにYamada UIをインストールして使用するためのガイド。
---

## インストール

::::steps

### アプリケーションを作成する

Next.jsのアプリケーションを作成します。

:::code-group

```bash [pnpm]
pnpm create next-app my-app --typescript
```

```bash [npm]
npx create-next-app my-app --typescript
```

```bash [yarn]
yarn create next-app my-app --typescript
```

```bash [bun]
bun create next-app my-app --typescript
```

:::

### セットアップする

コマンドを実行すると、プロジェクトに必要なファイルやフォルダが作成されます。

:::code-group

```bash [pnpm]
pnpm dlx @yamada-ui/cli init
```

```bash [npm]
npx @yamada-ui/cli init
```

```bash [yarn]
yarn dlx @yamada-ui/cli init
```

```bash [bun]
bunx @yamada-ui/cli init
```

:::

### パッケージをインストールする

アプリケーションに`@workspaces/ui`をインストールします。

:::code-group

```bash [pnpm]
pnpm add "@workspaces/ui@workspace:*"
```

```bash [npm]
npm install "@workspaces/ui@workspace:*"
```

```bash [yarn]
yarn add "@workspaces/ui@workspace:*"
```

```bash [bun]
bun add "@workspaces/ui@workspace:*"
```

:::

### プロバイダーを追加する

インストール後、アプリケーションのルートに`UIProvider`を追加します。
ハイドレーションエラーを抑制するために、`html`と`body`に`suppressHydrationWarning`を`true`に設定します。

```tsx title="layout.tsx" {1,9-11}
import { UIProvider } from "@workspaces/ui"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body suppressHydrationWarning>
        <UIProvider>{children}</UIProvider>
      </body>
    </html>
  )
}
```

### コンポーネントを使用する

`UIProvider`を追加したら、アプリケーション内でコンポーネントを使用します。

```tsx title="page.tsx" {1,4}
import { Button } from "@workspaces/ui"

export default function Home() {
  return <Button>Click me!</Button>
}
```

これで、Yamada UIのセットアップは完了です！

::::

## スクリプト

### ColorModeScript

[カラーモード](/docs/theming/color-mode)を使用する場合は、正常に動作させるために`body`に`ColorModeScript`を追加する必要があります。

理由は、カラーモードが`localStorage`や`cookies`を用いて実装されており、ページの読み込み時に同期を正しく機能させるためです。

```tsx title="layout.tsx" {1,11}
import { UIProvider, ColorModeScript } from "@workspaces/ui"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body suppressHydrationWarning>
        <ColorModeScript />

        <UIProvider>{children}</UIProvider>
      </body>
    </html>
  )
}
```

もし、[コンフィグ](/docs/theming/configuration/overview)の`defaultColorMode`を変更した場合は、`ColorModeScript`に`defaultValue`を設定します。

```tsx title="layout.tsx" {12}
import { UIProvider, ColorModeScript } from "@workspaces/ui"
import { config } from "@workspace/theme"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body suppressHydrationWarning>
        <ColorModeScript defaultValue={config.defaultColorMode} />

        <UIProvider config={config}>{children}</UIProvider>
      </body>
    </html>
  )
}
```

### ThemeSchemeScript

[テーマの切り替え](/docs/theming/switching-themes)を使用する場合は、正常に動作させるために`body`に`ThemeSchemeScript`を追加する必要があります。

理由は、テーマの切り替えが`localStorage`や`cookies`を用いて実装されており、ページの読み込み時に同期を正しく機能させるためです。

```tsx title="layout.tsx" {1,11}
import { UIProvider, ThemeSchemeScript } from "@workspaces/ui"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body suppressHydrationWarning>
        <ThemeSchemeScript />

        <UIProvider>{children}</UIProvider>
      </body>
    </html>
  )
}
```

もし、[コンフィグ](/docs/theming/configuration/overview)の`defaultThemeScheme`を変更した場合は、`ThemeSchemeScript`に`defaultValue`を設定します。

```tsx title="layout.tsx" {12}
import { UIProvider, ThemeSchemeScript } from "@workspaces/ui"
import { config } from "@workspace/theme"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body suppressHydrationWarning>
        <ThemeSchemeScript defaultValue={config.defaultThemeScheme} />

        <UIProvider config={config}>{children}</UIProvider>
      </body>
    </html>
  )
}
```

### クッキーを使用する

クッキーを使用することで、サーバーサイドレンダリングでも正常に動作させることができます。

:::warning
[cookies](https://nextjs.org/docs/app/api-reference/functions/cookies)を使用した場合は、[ダイナミックレンダリング](https://nextjs.org/docs/app/getting-started/partial-prerendering#dynamic-rendering)が採用されます。
:::

```tsx title="layout.tsx" {2,9,14-17}
import { UIProvider, ColorModeScript, ThemeSchemeScript } from "@workspaces/ui"
import { cookies } from "next/headers"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const cookieStore = await cookies()

  return (
    <html lang="en" suppressHydrationWarning>
      <body suppressHydrationWarning>
        <ColorModeScript type="cookie" />
        <ThemeSchemeScript type="cookie" />

        <UIProvider cookie={cookieStore.toString()}>{children}</UIProvider>
      </body>
    </html>
  )
}
```
